<div class="auth" ng-style="{ 'background-image': 'url(' + uiCustomization.pattern.url + '), url(' + (uiCustomization.background.url || 'images/login.webp' ) +')' }">
    <div class="auth__container" ng-class="{ 'auth__container--wide': showPlainLogin && loginProviders.length }">
        <div class="auth__head">
            <img class="auth__logo" ng-src="{{ uiCustomization.loginScreenLogo_custom.url || uiCustomization.loginScreenLogo_default.url }}" fallback-src="{{ uiCustomization.loginScreenLogo_default.url }}" alt="Login screen logo image">
            <h1 class="auth__title">{{ 'platform.blades.login.labels.sign-in' | translate: (uiCustomization.title ? uiCustomization : { title: 'Virto Commerce' }) }}</h1>
        </div>
        <div class="auth__content">
            <!--Login form-->
            <form class="login-form" ng-if="showPlainLogin && !loginProgress" ng-submit="ok()" name="loginForm" novalidate>
                <div class="login-form__inputs">
                    <div class="vc-input">
                        <label class="vc-input__label"> {{ 'platform.blades.login.labels.login' | translate }} <span class="vc-input__asterisk">*</span> </label>
                        <div class="vc-input__container">
                            <input class="vc-input__field" type="text" name="login" placeholder="{{ 'platform.blades.login.labels.log-in-placeholder' | translate }}" ng-model="user.email" required autofocus va-autofill>
                        </div>
                    </div>
                    <div class="vc-input vc-input--password">
                        <label class="vc-input__label"> {{ 'platform.blades.login.labels.password' | translate }} <span class="vc-input__asterisk">*</span> </label>
                        <div class="vc-input__container">
                            <input class="vc-input__field" name="password" type="{{ showPassword ? 'text' : 'password' }}" placeholder="{{ 'platform.blades.login.labels.password-placeholder' | translate }}" ng-model="user.password" required va-autofill>
                            <button class="vc-input__password-switcher" type="button">
                                <svg class="vc-input__icon" ng-if="!showPassword" ng-click="togglePassword()"><use href="/images/eye-off.svg#icon"></use></svg>
                                <svg class="vc-input__icon" ng-if="showPassword" ng-click="togglePassword()"><use href="/images/eye.svg#icon"></use></svg>
                            </button>
                        </div>
                    </div>
                    <div class="login-form__flex">
                        <label class="vc-checkbox">
                            <input type="checkbox" class="vc-checkbox__input" name="c1" checked="" ng-model="user.remember">
                            <span class="vc-checkbox__label">{{ 'platform.blades.login.labels.remember-me' | translate }}</span>
                        </label>
                        <a class="vc-link" ui-sref="forgotpasswordDialog">{{ 'platform.blades.login.labels.forgot-password' | translate }}</a>
                    </div>
                </div>
                <div class="login-form__alerts" ng-if="authError">
                    <div class="vc-alert vc-alert--error">
                        <svg class="vc-alert__icon">
                            <use href="/images/error.svg#icon"></use>
                        </svg>
                        <div class="vc-alert__text"> {{ authError }} </div>
                    </div>
                </div>
                <div class="login-form__buttons">
                    <button type="submit" ng-disabled="loginForm.$invalid||loginProgress" class="vc-button login-form__button">{{ 'platform.blades.login.labels.log-in' | translate }}</button>
                </div>
            </form>
            <!-- Divider -->
            <div class="vc-divider" ng-if="showPlainLogin && loginProviders.length && !loginProgress">
                <div class="vc-divider__text">{{ 'platform.blades.login.labels.or' | translate }}</div>
            </div>
            <div class="socials" ng-if="loginProviders.length && !loginProgress">
                <a href="#" class="vc-button-social" ng-repeat="provider in loginProviders" ng-click="$event.preventDefault();externalLogin(provider);">
                    <img class="vc-button-social__img" ng-src="{{provider.logoUrl}}" onerror="this.style.display = 'none';" ng-if="provider.logoUrl" alt="">
                    <div class="vc-button-social__text">{{ provider.displayName }}</div>
                </a>
            </div>
            <div class="vc-loader" ng-if="loginProgress">
                <div class="vc-loader__text">{{ 'platform.blades.login.labels.signing-in' | translate }}</div>
                <div class="vc-loader__line"></div>
            </div>
        </div>
    </div>
</div>
